<template>
  <a-card :bordered="false">
  <a-row :gutter="24">
    <a-col :md="14" :sm="24" style="margin-bottom: 20px">
      <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="10">
              <a-col :span="12">
                <a-form-item label="名称或编号">
                  <a-input placeholder="请输入名称或编号" v-model="queryParam.dictName"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">{{ $t('m.common.button.query') }}</a-button>
                  <a-button type="default" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('m.common.button.reset') }}</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>

          <a-table
            rowKey="id"
            size="middle"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :customRow="clickRow"
            @change="handleTableChange">
            <template slot="serialNum" slot-scope="text,record,index">
              {{(ipagination.current-1) * ipagination.pageSize + parseInt(index) + 1}}
            </template>

            <template slot="colorSpan" slot-scope="text, record">
              <span v-if="record.id == dict.id" style="color: red">
                {{text}}
              </span>
              <span v-else>
                {{text}}
              </span>
            </template>

          </a-table>
        </div>
    </a-col>
    <a-col :md="10" :sm="24" style="margin-bottom: 20px">
      <dict-item-list ref="dictItemList"></dict-item-list>
    </a-col>
  </a-row>
  </a-card>
</template>

<script>

  import { YcListMixin } from '@/mixins/YcListMixin'
  import DictItemList from './DictItemList'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'DictPortal',
    mixins: [YcListMixin],
    components: {
      DictItemList,
    },
    data () {
      return {
        columns: [
          {
            title:this.$t('m.common.label.number'),
            dataIndex: '',
            key: 'rowIndex',
            align: 'center',
            scopedSlots: { customRender: 'serialNum' },
          },
          {
            title: this.$t('m.system.dict.entity.dictName'),
            align: 'center',
            dataIndex: 'dictName',
            scopedSlots: { customRender: 'colorSpan' }
          },
          {
            title: this.$t('m.system.dict.entity.dictCode'),
            align: 'center',
            dataIndex: 'dictCode',
            scopedSlots: { customRender: 'colorSpan' }
          },
        ],
        dict: {},
        url: {
          list: YchConstant.PREFIX_SYSTEM + '/dict/listGroup',
        },
      }
    },
    methods: {
      clickRow (record) {
        return {
          on: {
            click: () => {
              this.dict = record
              this.$refs.dictItemList.edit(record)
            }
          }
        }
      },
    },
  }
</script>
<style lang="less" scoped>
</style>
